<template>
  <v-card class="border" rounded="lg" variant="flat">
    <v-card-title class="d-flex align-center">
      <span class="text-h5">Orders</span>
      <v-spacer />
      <v-text-field
        v-model="search"
        append-inner-icon="mdi-magnify"
        class="mr-2"
        density="compact"
        hide-details
        label="Search orders"
        single-line
        variant="outlined"
      />
      <v-btn color="primary" prepend-icon="mdi-plus" variant="flat" @click="createOrder">
        New Order
      </v-btn>
    </v-card-title>

    <v-card-text>
      <v-data-table
        class="border rounded-lg"
        :headers="headers"
        :items="orders"
        :items-per-page="10"
        :search="search"
      >
        <template #item.status="{ item }">
          <v-chip :color="getStatusColor(item.status)" size="small">
            {{ item.status }}
          </v-chip>
        </template>

        <template #item.actions="{ item }">
          <v-btn
            icon
            size="small"
            variant="flat"
            @click="viewOrder(item)"
          >
            <v-icon>mdi-eye</v-icon>
          </v-btn>
          <v-btn
            icon
            size="small"
            variant="flat"
            @click="editOrder(item)"
          >
            <v-icon>mdi-pencil</v-icon>
          </v-btn>
          <v-btn
            icon
            size="small"
            variant="flat"
            @click="deleteOrder(item)"
          >
            <v-icon>mdi-delete</v-icon>
          </v-btn>
        </template>
      </v-data-table>
    </v-card-text>
  </v-card>
</template>

<script setup lang="ts">
  import { ref } from 'vue'

  const search = ref('')

  interface Order {
    id: number
    orderNumber: string
    customer: string
    date: string
    status: 'Pending' | 'Processing' | 'Shipped' | 'Delivered' | 'Cancelled'
    total: number
  }

  const headers = [
    { title: 'Order #', key: 'orderNumber' },
    { title: 'Customer', key: 'customer' },
    { title: 'Date', key: 'date' },
    { title: 'Status', key: 'status' },
    { title: 'Total', key: 'total' },
    { title: 'Actions', key: 'actions', sortable: false, align: 'end' as const },
  ] as const

  const orders = ref<Order[]>([
    {
      id: 1,
      orderNumber: 'ORD-2023-1001',
      customer: 'John Doe',
      date: '2023-06-22',
      status: 'Processing',
      total: 125.99,
    },
    {
      id: 2,
      orderNumber: 'ORD-2023-1002',
      customer: 'Jane Smith',
      date: '2023-06-21',
      status: 'Shipped',
      total: 89.5,
    },
    {
      id: 3,
      orderNumber: 'ORD-2023-1003',
      customer: 'Robert Johnson',
      date: '2023-06-20',
      status: 'Delivered',
      total: 245.75,
    },
    {
      id: 4,
      orderNumber: 'ORD-2023-1004',
      customer: 'Emily Davis',
      date: '2023-06-19',
      status: 'Pending',
      total: 67.3,
    },
  ])

  function getStatusColor (status: string) {
    const colors: Record<string, string> = {
      Pending: 'warning',
      Processing: 'info',
      Shipped: 'primary',
      Delivered: 'success',
      Cancelled: 'error',
    }
    return colors[status] || 'default'
  }

  function viewOrder (order: Order) {
    console.log('View order:', order)
  // Navigate to order detail page
  // router.push(`/orders/${order.id}`)
  }

  function editOrder (order: Order) {
    console.log('Edit order:', order)
  // Navigate to edit order page
  // router.push(`/orders/${order.id}/edit`)
  }

  function createOrder () {
    console.log('Create new order')
  // Navigate to create order page
  // router.push('/orders/new')
  }

  function deleteOrder (order: Order) {
    console.log('Delete order:', order)
  // Show confirmation dialog and delete order
  // if (confirm(`Are you sure you want to delete order ${order.orderNumber}?`)) {
  //   // Delete order logic here
  // }
  }
</script>

<route lang="json">
{
  "meta": {
    "layout": "default"
  }
}
</route>
